<template>
  <div class="app-container calendar-list-container">
    <el-row>
      <el-col :span="24">
        <div>
          <TableFrom
            :list="list"
            @handleSelectionChange="handleSelectionChange"
            :options="options"
            :columns="columns"
            :operates="operates"
            :formItems="formItems"
            :tabFrom="tabFrom"
            :pagination="pagination"
            @submit="handleSubmit"
            @batchSubmit="batchDataClick"
            @newAdd="newAdd"
            @handleSizeChange="handleSizeChange"
            @handleCurrentChange="handleCurrentChange"
          >
          </TableFrom>

          <AddOrUpdate
            v-if="addOrUpdateVisible"
            ref="addOrUpdate"
            @refreshDataList="getData"
            @refresh="search"
          ></AddOrUpdate>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import TableFrom from '@/components/packages/publicTable.vue';
import { NowTime } from '@/utils/getDate';
import AddOrUpdate from './RegUser';
export default {
  name: 'userTab',
  components: {
    TableFrom,
    AddOrUpdate
  },
  computed: {},
  data() {
    return {
      addOrUpdateVisible: false,
      formItems: [
        {
          lable: '',
          type: 'daterange',
          key: 'date',
          placeholder: '请选择日期',
          defaultValue: NowTime(),
          rules: [],
          style: { width: '300px' }
        },
        {
          lable: '用户名：',
          type: 'input',
          key: 'username',
          placeholder: '请输入用户名',
          style: { width: '200px' }
        },
        {
          lable: '角色类型：',
          type: 'dropDown',
          key: 'userType',
          placeholder: '角色类型',
          style: { width: '200px' },
          clearable: true,
          option: [
            { label: '后端开发', value: 0 },
            { label: '前端开发', value: 1 },
            { label: '大数据开发', value: 2 },
            { label: '测试', value: 3 },
            { label: '产品', value: 4 },
            { label: 'PMO', value: 5 }
          ]
        }
      ],

      list: [], // table数据
      listParm: {
        page: 1,
        size: 10,
        start: '',
        end: '',
        username: ''
      },
      options: {
        stripe: true, // 是否为斑马纹 table
        highlightCurrentRow: true, // 是否支持当前行高亮显示
        mutiSelect: true, // 是否支持列表项选中功能
        indexList: true, //是否展示序号列
        page: true
      }, // table 的参数
      //表头操作
      tabFrom: {
        selectButton: true, //是否展示查询按钮
        resetting: true, //是否展示重置按钮
        newAdd: true, //是否展示新增按钮
        batch: true, //是否展示批量删除按钮
        batchDisabled: true //批量删除按钮是否置灰
      },
      pagination: {
        currentPage: 1,
        pageSize: 10,
        totalCount: 0
      },
      batchDelete: [], //删除用户的id西悉尼
      columns: [
        {
          key: 'user',
          label: '姓名',
          align: 'center'
        },
        {
          key: 'username',
          label: '用户名',
          align: 'center'
        },
        {
          key: 'userType',
          label: '角色',
          align: 'center'
          // formatter: (row, col, cellVaule) => {
          //   if (row.nickname == 0) {
          //     return '管理员';
          //   } else {
          //     return '普通用户';
          //   }
          // }
        },
        {
          key: 'team',
          label: '归属团队',
          align: 'center'
        },
        {
          key: 'createdBy',
          label: '创建人',
          align: 'center'
        },
        {
          key: 'createdTime',
          label: '创建时间',
          align: 'center'
        },
        {
          key: 'updatedTime',
          label: '更新时间',
          align: 'center'
        }
      ], // 需要展示的列

      // 按钮
      operates: {
        width: 150,
        list: [
          {
            id: '1',
            label: '编辑',
            style: 'cursor:pointer;color: #409eff;',
            show: true,
            class: 'el-icon-edit',
            plain: true,
            method: (scope, row) => {
              this.handleEdit(row.id);
            }
          },
          {
            id: '2',
            label: '删除',
            style: 'cursor:pointer;color: #b3450e;',
            class: 'el-icon-delete',
            show: true,
            plain: false,
            method: (index, row) => {
              this.handleDel(row.id);
            }
          }
        ]
      } // 列操作按钮
    };
  },
  mounted: function() {
    var _this = this;
    this.getList(1, this.pagination.pageSize);
    window.bus.$on('blogTableReload', function() {
      _this.getList(_this.pagination.currentPage, _this.pagination.pageSize);
    });
  },
  methods: {
    // 选中行
    handleSelectionChange(val) {
      this.batchDelete = val;
      if (this.batchDelete.length > 0) {
        this.tabFrom.batchDisabled = false;
      } else {
        this.tabFrom.batchDisabled = true;
      }
    },

    // 编辑
    handleEdit(id) {
      var _this = this;
      this.addOrUpdateVisible = true;
      this.$nextTick(async () => {
        await this.$refs.addOrUpdate.init(id);
        await this.$refs.addOrUpdate.getMenu();
      });
    },
    search() {
      this.getList(1, this.pagination.pageSize);
    },
    handleSubmit(formDataInfo) {
      var _this = this;
      _this.listParm = formDataInfo;
      _this.getList(1, this.pagination.pageSize);
    },
    //单条删除
    async handleDel(index) {
      var _this = this;
      const confirmResult = await this.$messageIndex.MessageBoxQuestion(
        '删除后将无法逆转，是否继续？'
      );
      if (confirmResult) {
        _this.batchDelete.push(index);
        _this.deleteRow();
      }
    },
    //批量删除按钮点击
    async batchDataClick(val) {
      if (val) {
        var _this = this;
        const confirmResult = await this.$messageIndex.MessageBoxQuestion(
          '删除后将无法逆转，是否继续？'
        );
        if (confirmResult) {
          let deleteData = this.batchDelete.map(item => {
            const id = item.id;
            return id;
          });
          this.batchDelete = deleteData;
          _this.deleteRow();
        }
      }
    },
    //删除执行
    async deleteRow() {
      var _this = this;
      let requestData = {
        ids: _this.batchDelete
      };
      let res = await this.$api.userApi.deleteUserInfo(requestData, {
        loadingTime: 100,
        loadingText: '数据执行中...'
      });
      if (!res.msg) {
        this.$messageIndex.Notice('成功', '用户删除成功', 'success');
      } else {
        this.$messageIndex.Notice('错误', res.msg + '--删除失败', 'error', '0');
      }
      this.batchDelete = [];
      this.getList(_this.pagination.currentPage, _this.pagination.pageSize);
    },
    //新增按钮触发
    newAdd(val) {
      if (val) {
        this.addOrUpdateVisible = true;
        this.$nextTick(async () => {
          await this.$refs.addOrUpdate.init();
          await this.$refs.addOrUpdate.getMenu();
        });
      }
    },
    async getList(page, size) {
      var _this = this;
      if (page) _this.listParm.page = page;
      if (size) _this.listParm.size = size;
      let res = await this.$api.userApi.userInfoList(_this.listParm, {
        loadingTime: 100,
        loadingText: '数据加载中...'
      });

      if (res) {
        _this.list = res.records;
        _this.pagination.currentPage = res.current;
        _this.pagination.totalCount = res.total;
      }
    },
    handleSizeChange(val) {
      this.listParm.size = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.listParm.page = val;
      this.getList();
    }
  }
};
</script>
